<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<!--
    A.html    轮播图
      1. html  划分网页结构
      2. css   优化网页结构
      3. javascript   定时器  单击事件   人机交互效果

    另外一个位置    轮播图
       1. html   2. css  .css   3. javascript    .js 冗余
     B.html   轮播图
       1. html   2. css  3. javascript  减少冗余    .css   .js  web


    vue   组件化开发思想   面向对象    提升代码的复用  减少代码的冗余
    组件:  将实现特定功能的html css  javascript  静态资源等组合在一起形成一个文件  则这个文件就是组件   .vue
      轮播图  lb.vue    html  css  js 静态资源    lb.vue 组件    封装
      脚手架 vue-cli     spa  单页面化应用   index.html   组件的动态渲染

   组件分类:
      编写形式:
          1. 非单文件组件    不以独立文件（.vue）编写的组件     嵌入在   .html文件中
          2. 单文件组件       以独立文件的形式编写组件    lb.vue  浏览器无法直接运行    编译   编译环境
      作用域：  组件的作用域是根据组件注册的位置决定
          1.全局组件       注册在全局作用域中的组件   Vue
          2.局部组件       注册在其他组件中的组件    a.vue  b.vue  ...
-->
<div id="app">
    <!--    组件标签-->
    <!--    <customer1></customer1>-->
    <!--    <customer2></customer2>-->
</div>

<script>

    // 组件     非单文件组件  全局组件    参数1  组件名字  参数2  组件对象  组件名  驼峰命名法
    Vue.component('customer1', {
        template: '<div>hello vue component1</div>'
    })

    Vue.component('customer2', {
        template: '<div>hello vue component2</div>'
    })

    // 在创建vue实例之前已经在全局位置注册了组件啊  则在创建的vue实例绑定的容器中可以直接使用组件(组件标签)
    let vm = new Vue({
        el: '#app',
        template: `
          <div>
            <customer1></customer1>
            <customer2></customer2>
          </div>
        `,
        data: {}
    })

</script>
</body>
</html>